<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>班级点名系统</title>
  <style type="text/css">
    * {
      font-family: '微软雅黑';
      /*transition-duration: ;*/
      box-sizing: border-box;
    }

    h1,
    h2 {
      animation: changeColor 2s linear infinite;
      animation-direction: alternate;
    }

    h1 {
      background-color: #9acd32;
      color: white;
      text-align: center;
    }

    #content>div {
      float: left;
      width: 100px;
      height: 50px;
      margin: 5px;
      font-size: 20px;
      line-height: 50px;
      text-align: center;
    }

    .cell {
      background-color: black;
      color: white;
    }

    .current {
      background-color: #adff2f;
      color: blueviolet;
    }

    .a {
      background-color: #adff2f;
      color: blueviolet;
    }

    button {
      display: inline-block;
      height: 50px;
      /*width: 50px;*/
      background-color: yellowgreen;
      color: white;
      font-size: 16px;
      margin: 10px;
    }

    .select {
      display: inline-block;
      height: 30px;
      width: 100px;
      border: 1px solid yellowgreen;
      background-color: blanchedalmond;
      color: black;
      font-size: 14px;
      margin: 10px;
    }

    @keyframes changeColor {
      from {
        color: pink;
      }

      to {
        color: blueviolet;
      }
    }
  </style>
  <script>
    window.onload = function () {
      //获取元素容器
      const content = document.querySelector('#content')
      //获取选中人名显示区域
      const selectTitle = document.querySelector('#selectTitle')
      //创建数据 根据数据遍历元素容器
      const oldData = ["周国栋", "邓永聪", "黄承哲", "周俊斌", "邱鸿美", "刘展浩", "陈奕彬", "陈宇豪", "许仕杰", "李婷", "张晴铃", "唐德江", "戚耀华", "陈志豪", "黄曼怡", "梁伟远", "盛晔", "江梦筱", "郑思安", "袁林", "吴嘉聪", "覃贞凯", "曾佳璐", "王陶平", "李杰", "杨翠红", "梁锦涛", "惠书林", "何静怡", "冯炫", "杨镭", "胡冰", "杨广钦", "张高文", "成涛", "吴海颖", "张钊铭", "杨炜", "廖依琪", "李修琦", "赵静茹", "沈琼昊", "王洁", "邹攀峰", "韦家祥", "龚铭章", "陈镕润", "王汝玉", "唐强", "林鸿斌", "荣棒", "何子洋", "梁旭华", "朱虹燕", "高洁", "汪亚琳", "李佰强", "张璐", "唐鸿彬", "温燕桥", "钟飞璇", "廖顺顺", "丘鑫泉", "卢宇俊", "冯宝红", "肖碧洋", "方海涛"]

      //拿取本地存储 如果没有本地存储则遍历旧数组
      let newData = localStorage.getItem('student') ?
        JSON.parse(localStorage.getItem('student'))
        :
        oldData.map(function (val, i) {
          return {
            name: val,
            checked: false
          }
        })

      // 首次调用渲染
      renderHTML()

      //渲染模块
      function renderHTML() {
        if (!localStorage.getItem('student')) {
          //清空人名
          selectTitle.innerHTML = '被选中的小伙伴:'
          newData =
            oldData.map(function (val, i) {
              return {
                name: val,
                checked: false
              }
            })
        }
        //清空容器
        content.innerHTML = ''
        //遍历数组 回流容器
        newData.forEach(function (val, i) {
          let flag = val.checked ? 'select' : ''
          //设置节点内容和结构
          content.innerHTML += `<div class="cell ${flag}" id="${i}">${val.name}</div>`
        })
      }

      //开始按钮
      const go = document.querySelector('button')
      //定时器全局变量
      let timeID
      //点击按钮
      go.addEventListener('click', function () {
        //人名列表 取反选择
        const personList = document.querySelectorAll('.cell:not(.select)')
        //全部抽取完毕 则不往下执行
        if (personList.length < 1) return
        //未抽取人数只剩一个时
        if (personList.length == 1) {
          //抽到的人名显示在页面上
          selectTitle.innerHTML += `${personList[0].innerHTML} `
          //添加select类避免重复抽取
          personList[0].classList.add('select')
          //做数组处理
          newData[personList[0].id].checked = true
          //存一次数据到本地
          localStorage.setItem('student', JSON.stringify(newData))
          // 调用渲染
          renderHTML()
          return;
        }

        //开始按钮
        if (go.className === 'go') {
          go.className = 'stop'
          go.innerHTML = '停止'
          //开始点名
          timeID = setInterval(function () {
            //获取随机数
            const random = Math.floor(Math.random() * personList.length)
            // console.log(random);
            //找旧类 排他
            const old = document.querySelector('.current')
            if (old) old.classList.remove('current')
            personList[random].classList.add('current')
          }, 10)
        }
        //停止按钮
        else if (go.className === 'stop') {
          //清除定时器
          clearInterval(timeID)
          go.className = 'go'
          go.innerHTML = '开始'
          //抽到的人名显示在页面上
          selectTitle.innerHTML += `${document.querySelector('.current').innerHTML} `
          //添加select类避免重复抽取
          const current = document.querySelector('.current')
          current.classList.add('select')
          //做数组处理
          newData[current.id].checked = true
          //存一次数据到本地
          localStorage.setItem('student', JSON.stringify(newData))
          //调用渲染
          renderHTML()
        }
      })

      //清除模块
      const clear = document.querySelector('.clear')
      clear.addEventListener('click', function () {
        //清空本地存储
        localStorage.clear('student')
        //调用渲染
        renderHTML()
      })
    }
  </script>
</head>

<body>
  <h1>点名系统</h1>
  <h2 id="selectTitle">被选中的小伙伴：</h2>
  <button class="go">开始</button>
  <button class="clear">清空</button>

  <div id="content">
    <!--  <div class="cell">浩良</div>
      <div class="cell">铭锋</div>
      <div class="cell">文斌</div>
      <div class="cell">坤哥</div>
      <div class="cell">刀郎</div>
      <div class="cell">和峰</div>
      <div class="cell">嘉辉</div> -->
  </div>

</body>

</html>